<template>
  <view class="prompt-box" v-if="visible" @touchmove="true">
    <view class="prompt">
     <view class="prompt-top">
        <text class="prompt-title" :style="{color: titleColor,fontSize: titleSize +'upx',fontWeight:fontWeight+'upx'}">{{title}}</text>
      </view>
      <view class="prompt-buttons">
        <button class="prompt-cancle" :style="'color:' + mainColor" @click="close">取消</button>
        <button class="prompt-confirm" :style="{color: ensureColor,fontWeight:enSurefontWeight+'upx'}" @click="confirm">{{ensure}}</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false,
        required: true,
      },
	  //标题内容
      title: {
        type: String,
        default: '提示',
      },
	  //右键文字设置
	  ensure: {
	    type: String,
	    default: '确定',
	  },
      placeholder: {
        type: String,
        default: '请输入内容',
      },
	  //左键颜色设置
      mainColor: {
        type: String,
        default: '#e74a39',
      },
	  //右键颜色设置
	  ensureColor: {
	    type: String,
	    default: '#e74a39',
	  },
	  //内容颜色设置
	  titleColor:{
		  type:String,
		  default: '',
	  },
	  //内容字体大小设置
	  titleSize:{
	  	  type:String,
	  	  default: '26',
	  },
	  //内容字体宽度设置
	  fontWeight:{
		  type:String,
		  default: '400',
	  },
      defaultValue: {
        type: String,
        default: '',
      },
	  //右键字体粗细
	  enSurefontWeight:{
	  	type: String,
	  	default: '500',
	  },
    },
    data() {
      return {
        value: '',
      }
    },
    watch: {
      visible(val) {
        if(val) {
          this.value = this.defaultValue
		  
        }
      }
    },
    mounted() {
      this.value = this.defaultValue === 'true' ? '' : this.defaultValue
    },
    methods: {
      close() {
        this.$emit('update:visible', false)
      },
      confirm() {
        this.$emit('confirm', this.value)
        this.value = ''
      },
    }
  }
</script>

<style scoped>
  view,
  button,
  input {
    box-sizing: border-box;
  }
	
  .prompt-box {
    position: fixed;
    left: 0;
    top: -196upx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 120%;
    background: rgba(0, 0, 0, 0.6);
    transition: opacity .2s linear;
	z-index: 9;
  }

  .prompt {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 594upx;
    min-height: 200upx;
    background: white;
    border-radius: 20upx;
    overflow: hidden;
	font-family:PingFang SC;
  }

  .prompt-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .prompt-title {
    margin: 58upx 0;
  }



  .prompt-buttons {
    display: flex;
    width: 100%;
    /* box-shadow: 0 0 2upx 2upx #eee; */
  }
  
  .prompt-buttons button:after {
    border-radius: 0;
  }

  button {
    width: 50%;
    background: white;
    border-radius: 0;
  }

  .prompt-cancle {
    background: white;
	font-size:36upx;
	font-weight:400;
	padding: 4upx 0;
  }

  .prompt-confirm {
    color: white;
	font-size:36upx;
	/* font-weight:500; */
	padding: 4upx 0;
  }
</style>
